<template>
	<view>
		<!-- 支付按钮 -->
		<button type="primary" @click="requestPayment">支付</button>
		<!-- 对话框的按钮 -->
	    <button class="aibutten" type="primary" @click="aiChatting"></button>
   

         <web-view    v-if="showWebView"  :src="alipayHtmlPath"  ></web-view>
		  <!-- <web-view    v-if="showWebView"  :src="alipayPayUrl"  ></web-view> -->
     
		 
	</view>
	

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import PaymentWebView from '@/pages/alipay-proxy/index.vue'; // 引入支付页面组件
    import { tradeNo } from '@/pages/utils/api/order.js'
	const showPaymentPage = ref(false);
	const paymentFormHtml = ref('');
	const showWebView = ref(false);
	const alipayHtmlPath = ref('');
	let alipayPayUrl =ref("");
	// AI聊天功能
	const aiChatting = () => {
	  console.log('打开AI聊天窗口');
	  // 实现AI聊天窗口的逻辑
	  uni.navigateTo({
	  	url:'/pages/ai/index'
	  })
	}
// 请求支付
// const requestPayment =  async ( ) =>{
// 	try {
// 	  let  data= {
//         amount: 0.01, // 支付金额，单位：元
//         orderDescription: '测试订单'
//       }
// 	  const res = await tradeNo(data);
// 	  let re = transformToTree(res.data);
//       treeData.value = re[0];
// 	  console.log('transformToTree', treeData.value)
// 	} catch (error) {
// 	  console.log('获取数据失败', error)
// 	}
// }
  // 写入临时文件（uni-app写法）

const requestPayment = async () => {
  try {
    // 请求后端接口，获取支付参数
    const response = await uni.request({
      url: 'http://localhost:8088/alipay/order1',
      method: 'POST',
      data: {
        amount: 0.01, // 支付金额，单位：元
        orderDescription: '测试订单'
      }
    });
    // 注意：uni.request返回的结构在不同平台可能不同
    const resData = response.data;
    const { tradeNO } = resData;

    if (tradeNO) {
		const actionUrl = tradeNO.match(/action="([^"]*)"/i)?.[1] || '';
		alipayHtmlPath.value = actionUrl;
		alipayPayUrl.value = tradeNO;
		console.log(tradeNO,"tradeNO")
			// 环境判断
		showWebView.value=true;
    } else {
      uni.showToast({
        title: '获取支付信息失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('请求支付出错:', error);
    uni.showToast({
      title: '请求支付失败，请稍后重试',
      icon: 'none'
    });
  }
};
	// 处理支付成功
	const handlePaymentSuccess = (data) => {
		showPaymentPage.value = false;
		uni.showToast({
			title: '支付成功',
			icon: 'success'
		});
		// 这里可以进行支付成功后的操作，如跳转页面、更新订单状态等
	};

	// 处理支付失败
	const handlePaymentFailed = (message) => {
		showPaymentPage.value = false;
		uni.showToast({
			title: '支付失败: ' + message,
			icon: 'fail'
		});
	};

	// 处理支付错误
	const handlePaymentError = (error) => {
		showPaymentPage.value = false;
		uni.showToast({
			title: '支付处理出错: ' + error,
			icon: 'fail'
		});
	};
	
	

</script>

<style scoped>
	.payment-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	
	  
	  .ai-floating-button::after {
	    border: none; /* removes the default border on uni-app buttons */
	  }
	  
	  .ai-floating-button:active {
	    background-color: #0062CC; /* slightly darker when pressed */
	    transform: scale(0.98);
	  }
	

	
	
</style>
